<template>
	<div class="shop-car">
		<!-- 购物车商品列表 -->
		<div class="goodsList">
			<div class="mui-card" v-for="item in list" :key="item.id">
				<mt-switch v-model="item.selected" @change="selectedChange(item.id,item.selected)"></mt-switch>
				<img :src="item.url" />
				<div class="goods-info">
					<h3 class="">{{item.title}}</h3>
					<p>
						<span class="price">${{ item.price }}</span>
						<span class="switch"><numbox :val="item.count" :max="item.max" :goodsId="item.id"></numbox></span>
						<a href="#" class="delete" @click="remove(item.id)">删除</a>
					</p>
				</div>
			</div>
		</div>
		<!-- 结算 -->
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner jiesuan">
					<div class="left">
						<p>总计（不含运费）</p>
						<p>
							已勾选商品<span class="red">{{getJSOject.count}}</span>件，
							总价<span class="red">￥{{getJSOject.price}}</span>
						</p>
					</div>
					<div class="right">
						<mt-button type="danger" size="small">去结算</mt-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import numbox from '../subcomponents/ShopCar_numbox.vue'
	export default {
		data(){
			return {
				list:this.$store.getters.carList
			}
		},
		created() {
			
		},
		methods:{
			remove(id){
				this.$store.commit("deleteGoods",id);
			},
			selectedChange(id,val){
				this.$store.commit("updateSelected",{id:id,val:val})
			}
		},
		components:{
			numbox
		},
		computed:{
			getJSOject:function(){
				var obj = {
					count:0,
					price:0
				}
				this.list.forEach(item => {
					if(item.selected){
						obj.count+=parseInt(item.count);
						obj.price+=parseInt(item.price);
					}
				})
				return obj;
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.shop-car{
		background-color: #eee;
		overflow: hidden;
		.goodsList{
			.mui-card{
				display: flex;
				align-items: center;
				padding: 10px;
				img{
					width: 60px;
					height: 60px;
					margin: 0px 5px;
				}
				.goods-info{
					h3{
						font-size: 13px;
					}
					.price{
						color: red;
						font-weight: bold;
						font-size: 16px;
					}
					.switch{
						margin: 0px 5px;
					}
					.delete{
						font-weight: bold;
					}
				}
			}
		}
		.jiesuan{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.red{
				color: red;
				font-size: 16px;
				padding: 0px 5px;
			}
		}
	}
</style>
